---
import table from "@/assets/formula/blasting.png";
import SingleItem from "./components/SingleItem.astro";
import type { BlastingFormula } from "@/types/formula";
import useIcon from "@/hooks/useIcon";
import { Image } from "astro:assets";
import { AstroError } from "astro/errors";

export interface Props {
  formula: BlastingFormula;
  alt?: string;
}

const {
  formula: { result, ingredient, experience, cookingtime },
  alt = "合成配方",
} = Astro.props;

const resultIcon = useIcon(result);

if (!resultIcon) throw new AstroError(`找不到以下物品图标: ${result}`);

const base = useIcon(ingredient.item)!;
const coal = useIcon("minecraft:coal")!;
---

<p>获得经验：{experience} 点，消耗时间：{cookingtime / 20} 秒</p>
<div class="relative mb-1 w-80 h-45 origin-top-left md:scale-100 scale-90">
  <Image src={table} alt={alt} class="!bg-transparent" />
  <div class="absolute top-[46px] left-24">
    <SingleItem src={base.smallIcon} title={base.name} id={base.registerName} />
  </div>
  <div class="absolute top-[117px] left-[95px]">
    <SingleItem src={coal.smallIcon} title={coal.name} id={base.registerName} />
  </div>
  <div class="absolute left-[208px] top-[74px] p-2">
    <SingleItem src={resultIcon.smallIcon} title={resultIcon.name} />
  </div>
</div>
